<template>
  <div style="text-align:center;width:100%;margin:0 auto;height:93px;padding-top:18px;background:#979fa7">
    <div style="float:left"><img :src="logo"></div>
    <div>
      <h1>
        联合重卡IT综合下载平台
      </h1>
    </div>
  </div>
  <div style="text-align:center;width:100%;margin:0 auto;height:93px;padding-top:18px;">
    <h1>
      {{ this.fields.title }}
    </h1>
  </div>
  <div style="width:95%">
    <vol-form ref="form" :labelWidth="100" :load-key="true" :formFields="fields" :formRules="formOptions"
      @click="contentClick">
    </vol-form>
  </div>
  <div>
    <VolHeader icon="md-podium" text="相关文档"></VolHeader>
    <ul class="link-list">
      <li class="link-list-li" :ref="article_li" v-for="(item, index) in sameLevelLink" :key="index"
        @click="selected(item)" :title="getLinkTip(item)">{{ item.title }}</li>
    </ul>
  </div>
  <look_downfile ref="look_downfile"></look_downfile>
</template>
<script>
import { ref } from 'vue';
var imgUrl = require("@/assets/imgs/comlog.png");
import http from "@/api/http.js";
import VolForm from "@/components/basic/VolForm.vue";
import abc from "@/uitils/h_common.js"; //这是默认的写法
import { useRoute } from "vue-router";
import VolHeader from "@/components/basic/VolHeader.vue";
import look_downfile from "@/views/JRdownfile/jr_downfile_look_content.vue"
const route = useRoute();

export default {
  components: { VolHeader, abc, VolForm, look_downfile },
  data() {
    return {
      dialogVisible: false,
      isshow1: true,
      fields: { "classID": "", "sortPath": "", "title": "", "titleColor": "", "titleURL": "", "attachmentURL": "", "content": "" },
      formOptions: [[{ "title": "分类", "field": "classID", "type": "string", "readonly": true }],
      [{ "title": "标题", "field": "title", 'disabled': true, extra: { icon: 'el-icon-view', text: "点击内容可全屏显示" } },],
      [{ "title": "内容/摘要", "field": "content", "type": "editor", "height": 360, 'disabled': true}],
      [{ "title": "附件", "field": "attachmentURL", "type": "file", "readonly": true },],
      ],
      logo: ref(imgUrl),
      sameLevelLink: [],
      id: this.$route.query.id,
    };
  },

  created() { },

  setup() {

  },

  mounted() {
    //设置求和默认值,手动输入值后会自动计算
    this.getDetails();
    //网址变动时页面刷新
    window.onhashchange = function () {
      location.reload();
    }
    this.getSampleLevelLink();
  },

  methods: {
    //全屏显示内容
    fullScreen() {
      this.$refs.look_downfile.dialogVisible = true;
      // this.$refs.look_downfile.get_content();
    },

    //根据参数获取文档信息
    getDetails() {
      let url = "api/Ok3w_Article/getFileInfo?id=" + this.id;
      http.post(url, {}, true).then((s) => {
        this.fields.classID = s[0].sortName;
        this.fields.title = s[0].title;
        this.fields.attachmentURL = s[0].attachmentURL;
        this.fields.content = s[0].content;
        this.$refs.look_downfile.content = s[0].content;
      });
    },

    //获取同级文档
    getSampleLevelLink() {
      let url = "api/Ok3w_Article/getSampleLevelLink?id=" + this.id;
      http.post(url, {}, true).then((s) => {
        s.forEach((e) => {
          this.sameLevelLink.push(e);
        });
      })
    },

    //点击同级文档链接跳转
    selected(item) {
      this.$router.push({ path: '/downfile_look', query: { id: item.id } }).then(() => {
        this.$router.go(-1);
        window.open(location.href, '_blank');
      })
    },

    //同级文档链接显示不完全时，提示框内显示完整内容
    getLinkTip(item) {
      return item.title;
    },

    //表单点击操作
    contentClick(event) {
      let currentElement = event.target;
      //点击内容部分，全屏显示
      while (currentElement.parentNode !== null) {
        currentElement = currentElement.parentNode;
        if (currentElement.className == 'el-scrollbar') {
          this.fullScreen();
          break;
        }
      }
      //点击下载链接，文档下载次数更新
      currentElement=event.target;
      while (currentElement.parentNode !== null) {
        currentElement = currentElement.parentNode;
        if (currentElement.className == 'form-file-list') {
          let url = "api/Ok3w_Article/updateDownloadCount?id=" + this.id;
          http.post(url,{},true);
          break;
        }
      }
    },
  },
};
</script>

<style>
.link-list {
  outline-color: rgb(60, 60, 60);
  color: rgb(144, 144, 144);
  list-style-position: outside;
  /* margin-inline-end: -24px;
  margin-right: -24px; */
}

.link-list-li {
  display: list-item;
  box-sizing: border-box;
  float: left;
  height: 30px;
  margin-bottom: 10px;
  margin-right: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-left: 3px;
  padding-right: 3px;
  width: 23%;

  line-height: 24px;
  text-align: left;
  /* text-size-adjust: 100%; */
  word-break: break-all;

  border-bottom-color: rgb(236, 236, 236);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-left-color: rgb(236, 236, 236);
  border-left-style: solid;
  border-left-width: 1px;
  border-right-color: rgb(236, 236, 236);
  border-right-style: solid;
  border-right-width: 1px;
  border-top-color: rgb(236, 236, 236);
  border-top-style: solid;
  border-top-width: 1px;

  list-style-image: none;
  list-style-position: outside;
  overflow-wrap: break-word;
}

.link-list-li:hover {
  text-decoration: underline;
  cursor: pointer;
}
</style>